<script lang='ts'  setup>
import mainStore from '@/store'
import { storeToRefs } from 'pinia';
import api from '@/api'
import { onBeforeMount, ref } from 'vue';
import userStore from '@/store/user';
import storage from '@/utils/storage';
import { useRouter } from 'vue-router';
const router = useRouter()
const { asideIsCollapse } = storeToRefs(mainStore)
defineProps({
    height: String
})


const leaveCount = ref(0)

onBeforeMount(async () => {
    const { data: res } = await api.getLeaveCountApi()
    leaveCount.value = res
})

const handleLogOut = () => {
    storage.del('userInfo')

    router.replace({ path: '/login' })
}

const handleUserCommand = (command: number) => {
    if (command === 1) {
        handleLogOut()
    }
}


</script>

<template>
    <div id='Header' :style="{ height }" class=" bg-white px-[20px] flex items-center justify-between shadow-md">
        <!-- left -->
        <div class="flex items-center">
            <el-icon class=" cursor-pointer transition-all  mr-[15px]" :class="{ 'rotate-[-540deg]': asideIsCollapse }"
                @click="asideIsCollapse = !asideIsCollapse">
                <fold />
            </el-icon>
            <el-breadcrumb separator-icon="ArrowRight">
                <template v-for="item in $route.matched">
                    <el-breadcrumb-item :to="item.path" v-if="item.path !== '/'">
                        {{ item.meta.title }}
                    </el-breadcrumb-item>
                </template>
            </el-breadcrumb>
        </div>

        <!-- right -->
        <div class="flex items-center mr-[15px]">
            <el-dropdown class="mr-[15px]">
                <!-- hidden属性设置隐藏 -->
                <el-badge :value="12" is-dot class=" cursor-pointer" :hidden="leaveCount <= 0">
                    <el-icon>
                        <Bell />
                    </el-icon>
                </el-badge>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>Action 1</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item disabled>Action 4</el-dropdown-item>
                        <el-dropdown-item divided>Action 5</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

            <el-dropdown class="cursor-pointer" @command="handleUserCommand">
                <div class="flex items-center text-blue-400 hover:text-blue-500">
                    <span class="pr-[5px]">hi, {{ userStore.$state.userName }} </span>
                    <el-icon>
                        <ArrowDown />
                    </el-icon>
                </div>

                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :command="0" disabled>邮箱: {{ userStore.$state.userEmail }} </el-dropdown-item>
                        <el-dropdown-item :command="1" divided>退出登陆</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

        </div>
    </div>
</template>
